<template>
  <div class="app">
    <van-nav-bar
      title="交易成功"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div class="text_card">
      <div class="text">感谢信任，期待再次光临</div>
      <van-divider :style="{ borderColor: '#A1A1A1', margin: '8px auto' }" />
      <div class="btnbox">
        <div style="margin-right: 10%" @click="gotoorder">订单信息</div>
        <div style="margin-left: 10%">联系商家</div>
      </div>
    </div>
    <div class="order_card">
      <div class="title">{{ orderinfo.table[0].store_name }}</div>
      <van-divider :style="{ borderColor: '#A1A1A1', margin: '8px auto' }" />
      <div class="orderlist">
        <div class="orderinfobox">
          <div class="orderimgbox">
            <img v-lazy="orderinfo.table[0].storecover_image[0]" alt="" />
          </div>
          <div class="orderinfo">
            <div class="info1">
              <div style="font-size: 18px">
                {{ orderinfo.table[0].t_type }}
                {{ orderinfo.table[0].t_number }}号球桌
              </div>
              <div style="font-size: 18px">
                ￥{{ orderinfo.table[0].pay_money }}
              </div>
            </div>
            <div style="font-size: 16px">
              用时：{{ orderinfo.table[0].playtime }}
            </div>
          </div>
        </div>
      </div>
      <van-divider :style="{ borderColor: '#A1A1A1', margin: '8px auto' }" />
      <div class="info2">
        <div>优惠券</div>
        <div style="color: #fe8059">-￥00.00</div>
      </div>
      <van-divider :style="{ borderColor: '#A1A1A1', margin: '8px auto' }" />
      <div class="hejiinfo">
        <div>已优惠</div>
        <div style="color: #fe8059">￥00.00</div>
        <div style="margin-left: 10px">合计</div>
        <div style="color: #fe8059">￥{{ orderinfo.table[0].pay_money }}</div>
      </div>
    </div>
    <div class="dingdan_card">
      <div class="info2">
        <div>订单编号</div>
        <div>{{ orderinfo.table[0].order_id }}</div>
      </div>
      <div class="info2">
        <div>付款时间</div>
        <div>{{ orderinfo.table[0].pay_time }}</div>
      </div>
      <div class="info2">
        <div>支付方式</div>
        <div>在线支付</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderinfo: {},
    };
  },
  methods: {
    backlink() {
      this.$router.push("/homepage");
    },
    gotoorder() {
      this.$router.push({
        name: "OrderDetail",
        params: {
          orderinfo: JSON.stringify(this.orderinfo),
        },
      });
    },
    initData(data) {
      if (data.table != null && data.table.length > 0) {
        for (var i = 0; i < data.table.length; i++) {
          data.table[i].playtime = this.getTimeDifference(
            data.table[i].open_time,
            data.table[i].close_time
          );
          const jsonString = data.table[i].storecover_image.replace(/'/g, '"');
          data.table[i].storecover_image = JSON.parse(jsonString);
        }
      }
    },
    getTimeStamp(timeStr) {
      const [date, time] = timeStr.split(" ");
      const [year, month, day] = date.split("-");
      const [hour, minute, second] = time.split(":");
      return (
        new Date(year, month - 1, day, hour, minute, second).getTime() / 1000
      );
    },

    // 计算相差时间
    getTimeDifference(openTime, closeTime) {
      const openTimeStamp = this.getTimeStamp(openTime);
      const closeTimeStamp = this.getTimeStamp(closeTime);
      let timeDiff = closeTimeStamp - openTimeStamp;
      if (timeDiff < 0) {
        timeDiff += 24 * 60 * 60; // 加上一天的秒数
      }
      const hours = Math.floor(timeDiff / 3600);
      const minutes = Math.floor((timeDiff % 3600) / 60);
      const seconds = Math.floor(timeDiff % 60);
      return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
        2,
        "0"
      )}:${String(seconds).padStart(2, "0")}`;
    },
  },
  created() {
    this.orderinfo = JSON.parse(this.$route.params.orderinfo);
    this.initData(this.orderinfo);
  },
};
</script>

<style scoped>
.app {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f3f5;
}
.text_card {
  width: 90%;
  margin: 10px auto;
  background-color: white;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px;
}
.text_card .text {
  font-size: 20px;
  font-weight: bold;
}
.btnbox {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
.order_card {
  width: 90%;
  margin: 10px auto;
  background-color: white;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px;
}
.order_card .title {
  font-size: 20px;
  font-weight: bold;
}
.orderlist {
  display: flex;
  flex-direction: column;
}
.orderinfobox {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 60px;
}
.orderimgbox {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
}
.orderimgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.orderinfo {
  flex-grow: 1;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.info1 {
  display: flex;
  justify-content: space-between;
}
.info2 {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  align-items: flex-end;
  margin: 5px auto;
}
.hejiinfo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-size: 18px;
}
.dingdan_card {
  width: 90%;
  margin: 10px auto;
  background-color: white;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px;
}
</style>